<template>
	<div>
		<van-nav-bar title="地址" left-text="返回" left-arrow @click-left="$router.go(-1)" />

		<van-address-list
			
			v-model="chosenAddressId"
			:list="list"
			default-tag-text="默认"
			@add="onAdd"
			@edit="onEdit"
		/>


		<!-- <van-popup v-model:show="show" position="bottom" :style="{ height: '60%' }">
			<van-address-edit
				:area-list="areaList"
				show-delete
				show-set-default
				show-search-result
				:search-result="searchResult"
				:area-columns-placeholder="['请选择', '请选择', '请选择']"
				@save="onSave"
				@delete="onDelete"
				@change-detail="onChangeDetail"
			/>
		</van-popup> -->
		
		<!-- 添加按钮 -->
		<van-address-list
			v-model="chosenAddressId"
			:list="list"
			default-tag-text="默认"
			@add="onAdd"
			@edit="onEdit"
		/>
	</div>
</template>
<script setup lang='ts'>
import { ref,onMounted } from 'vue';
import { Address,Addr } from '@/api/loginapi';

// 引入userStore ，此u该userId
import {useUserStore} from '@/store/userStore'
// userStore 就是获取到的store 仓库实例对象，相当于vuex中 this.$stort
const userStore = useUserStore()

console.log(userStore.userId);

const chosenAddressId = ref('1')
const list = ref([])

const show = ref(false)

// const onAdd = () => {
// 	show.value=true
// }

// 新增地址
const onAdd = () => {
	Addr({
		userid:userStore.userId,
		name:'张三',
		tel:'13666629898',
		province:'北京市',
		city:'北京市',
		county:'昌平区',
		addressDetail:'北京市昌平区',
		isDefault:true
	}).then((res)=>{
		console.log(res);
		
	})
}

const onEdit = () => {
	
}


onMounted(() => {
	Address({userid:userStore.userId}).then((res:any) => {
		console.log(res);
		if(res.code==200){
			list.value=res.data
		}
		
	})
})


</script>
<style scoped>

</style>